<!-- 新建需求 -->
<template>
  <div class="">
    <ze-nav-bar :left-arrow="true" :home="true" :title="processName" />
    <div>
      <div class="person-info">
        <div class="taskForm">
          <div>
            <select-down
              :columns="moduleNames"
              :value="moduleName"
              :label-name="'所属模块'"
              @changeValue="changeValue"
            />
          </div>

          <div class="moreStyle">
            <van-field
              v-model="iteration.source"
              class="basicClass"
              label="来源"
              placeholder-style="color:#999;"
              placeholder="请输入"
              type="input"
              @change="iteration.source = $event.detail"
            />
          </div>
          <div class="taskSty moreStyle">
            <div>来源备注</div>
            <div>
              <van-field
                v-model="iteration.sourceRemark"
                label="来源备注"
                class="evaluate"
                placeholder-style="color:#999;"
                autosize
                type="textarea"
                placeholder="请输入"
                @change="iteration.sourceRemark = $event.detail"
              />
            </div>
          </div>
          <div class="moreStyle">
            <van-field
              v-model="iteration.name"
              class="basicClass"
              label="需求名称"
              placeholder-style="color:#999;"
              placeholder="请输入"
              type="input"
              @change="iteration.name = $event.detail"
            />
          </div>
          <div>
            <select-down
              :columns="ownPriList"
              :value="iteration.pri"
              :label-name="'优先级'"
              @changeValue="changeValue"
            />
          </div>
          <div class="moreStyle">
            <van-field
              v-model="iteration.esWorkHours"
              class="basicClass"
              label="预计工时"
              placeholder-style="color:#999;"
              placeholder="请输入"
              type="number"
              @change="onChange"
            />
          </div>
          <div>
            <van-field
              v-model="iteration.end"
              label="截止时间"
              placeholder-style="color:#999;"
              readonly
              is-link
              input-align="right"
              placeholder="请选择"
              clickable
              @click-input="clickEndTime"
            />
            <van-popup :show="showEndTime" position="bottom">
              <van-datetime-picker
                type="date"
                :value="currentDates"
                :min-date="minDate"
                :basic-formatter="basicFormatter"
                @confirm="onEndTime"
                @cancel="onCancelEndTime"
              />
            </van-popup>
          </div>
          <div class="taskSty moreStyle">
            <div>描述</div>
            <div>
              <van-field
                v-model="iteration.describe"
                label="描述"
                class="evaluate"
                placeholder-style="color:#999;"
                autosize
                type="textarea"
                placeholder="请输入"
                @change="iteration.describe = $event.detail"
              />
            </div>
          </div>
          <div class="taskSty moreStyle">
            <div>验收标准</div>
            <div>
              <van-field
                v-model="iteration.acceptCriteria"
                label="验收标准"
                class="evaluate"
                placeholder-style="color:#999;"
                autosize
                type="textarea"
                placeholder="请输入"
                @change="iteration.acceptCriteria = $event.detail"
              />
            </div>
          </div>
          <div class="good-picture">
            <ze-upload
              v-model="iteration.pictures"
              style="width: 100%"
              type="upload"
              label="附件"
            />
          </div>
        </div>
        <div class="infoBtn">
          <van-button
            size="large"
            :class="showSubmit ? 'submit' : 'noSubmit'"
            round
            @click="submitPerson"
          >
            提交
          </van-button>
        </div>
      </div>
      <van-toast id="van-toast" />
    </div>
  </div>
</template>

<script>
import ZeNavBar from '@/components/ze-nav-bar/index.vue'
import selectDown from '@/pages/me/select-down.vue'
import Toast from '@/wxcomponents/vant/toast/toast'
import zeUpload from '@/components/ze-oa-form/ze-upload.vue'
import { getModuleList, postDemandForm } from '@/apis/command.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { selectDown, zeUpload, ZeNavBar },
  data() {
    // 这里存放数据
    return {
      iteration: {
        pri: '', // 优先级
        moduleId: '', // 所属模块
        name: '', // 需求名称
        source: '', // 来源
        sourceRemark: '', // 来源备注
        describe: '', // 描述
        pictures: [], // 附件
        esWorkHours: '', // 预计工时
        acceptCriteria: '', // 验收标准
        end: '', // 截止时间
      },
      processName: '新建需求',
      moduleName: '',
      Loading: false,
      showStartTime: false,
      showEndTime: false,
      showSubmit: false,
      // 所属模块list
      ownModuleList: [
        // { id: 1, name: '所属1' },
        // { id: 2, name: '所属2' },
        // { id: 3, name: '所属3' },
      ],
      currentDate: new Date().getTime(),
      currentDates: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  computed: {
    moduleNames() {
      return this.ownModuleList.map(item => item.name)
    },
    ownPriList() {
      return this.$getDictDatas(this.$DICT_TYPE.PRI).map(item => item.value)
    },
  },
  watch: {
    'iteration.source': function(newVal) {
      if (newVal) {
        this.showSubmit = true
      } else {
        this.showSubmit = false
      }
    },
  },
  created() {
    this.getModuleList()
  },
  mounted() {},
  activated() {},
  methods: {
    // 获取所属模块
    async getModuleList() {
      const res = await getModuleList()
      console.log(res.data, '模块')
      this.ownModuleList = res.data.map((item) => {
        return { id: item.id, name: item.modelName }
      })
    },
    onChange(event) {
      const input = event.detail
      if (/^[1-9]\d*$/.test(input)) {
        this.iteration.esWorkHours = input
      } else {
        this.iteration.esWorkHours = ''
        Toast('请填写正整数')
      }
    },
    onEndTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
      const Day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.end = GMT
      this.showEndTime = false
    },
    clickEndTime() {
      this.showEndTime = true
    },
    onCancelEndTime() {
      this.showEndTime = false
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '所属模块':
          this.moduleName = val.value
          this.iteration.moduleId = this.ownModuleList.find(item => item.name == val.value).id
          console.log(this.iteration.moduleId, 'val')
          break
        case '优先级':
          this.iteration.pri = val.value
          break
      }
    },
    async submitPerson() {
      if (!this.iteration.moduleId) {
        Toast('请选择所属模块')
        return
      }
      if (
        this.iteration.source === undefined || this.iteration.source.trim().length === 0
      ) {
        Toast('请填写来源')
      }
      console.log(this.iteration, '提交')
      uni.hideLoading()
      await uni.showLoading({
        mask: true,
        title: '正在提交',
      })
      await postDemandForm(this.iteration)
      uni.navigateBack()
    },
  },
}
</script>
<style lang="scss" scoped>
.person-info {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .taskForm {
    width: 93%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
  }
  .infoBtn {
    text-align: center;
    padding-top: 15%;
    padding-bottom: 10%;
    width: 80%;
  }
  .headSty {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0px 5px 0px 18px;
    .head-img {
      align-items: center;
      display: flex;
      img:nth-child(1) {
        width: 28px;
        height: 28px;
      }
      img:nth-child(2) {
        width: 16px;
        height: 16px;
      }
    }
  }
  .taskSty {
    padding: 10px 0px 0px 16px;
  }
}
</style>
<style lang="scss">
.good-picture {
  padding-left: 16px;
  padding-right: 6px;
}
.evaluate {
  view .van-cell__title {
    display: none !important;
  }
  view .van-cell__value {
    height: 100px;
    background: #f9f8f8;
  }
  view .van-field__body--textarea {
    height: 100%;
  }
}
.moreStyle {
  view {
    label {
      width: 100%;
      display: flex;
      white-space: nowrap;
    }
    input {
      padding-right: 3px;
      text-align: right;
    }
    textarea {
      height: 100% !important;
      padding-left: 8px;
      padding-top: 4px;
    }
  }
  .van-field__body {
    padding-right: 16px;
  }
}
.taskForm {
  .van-cell {
    padding: 10px 5px 10px 2px !important;
  }
  .van-cell__title {
    min-width: 8em !important;
    max-width: 8em !important;
    padding-left: 16px;
  }
  .van-field__control {
    color: #999 !important;
    font-size: 12px;
  }
  .van-icon:before {
    color: #999;
  }
  .van-field__label {
    color: #333 !important;
    white-space: normal !important;
  }
}
.infoBtn {
  .noSubmit {
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #ccc !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
  .submit {
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #029b00 !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
}
</style>
